<template>
  <!-- 轮播图 -->
  <div class="swiper-box">
    <image class="swiper-content" :src="showPic.pic" v-if="showPic">
      <!-- 上一张图 -->
      <div class="pre-box" @click="swiperPic('up')">
        <div class="circle-box pre-arrow"></div>
      </div>
      <!-- 下一张图 -->
      <div class="next-box" @click="swiperPic('down')">
        <div class="circle-box next-arrow"></div>
      </div>
    </image>
    <div class="swiper-content" v-else>
        213
    </div>  
  </div>
</template>

<script>
export default {
  data() {
    return {
      siwperPic: [
        {
          pic: "@/assets/swiper-img/1.png",
          title: "1",
          picIndex: 0,
        },
        {
          pic: "@/assets/swiper-img/2.png",
          title: "2",
          picIndex: 1,
        },
        {
          pic: require("@/assets/swiper-img/3.png"),
          title: "3",
          picIndex: 5,
        },
      ],
      showPicIndex: 0,
      showPic: null,
    };
  },
  mounted() {
    this.initShowPic()
    console.log(this.showPic);
  },
  methods: {
    initShowPic() {
        this.showPic =this.siwperPic[this.showPicIndex]
    },
    // 切换 轮播图片
    swiperPic(str) {
      if (str == "up") {
        if (this.showPicIndex == 0) {
          this.showPicIndex = this.siwperPic.length - 1;
        } else {
          this.showPicIndex--;
        }
      } else {
        if (this.showPicIndex == this.siwperPic.length - 1) {
          this.showPicIndex = 0;
        } else {
          this.showPicIndex++;
        }
      }
      this.showPic = this.siwperPic[this.showPicIndex];
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.swiper-content {
  position: relative;
  height: 500px;
  background-color: red;
  width: 1200px;
  z-index: 999;

  .pre-box {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 200px;
    background-color: rgba(0, 0, 0, 0.1);
  }
  .next-box {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 200px;
    background-color: rgba(0, 0, 0, 0.1);
  }

  .circle-box {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .pre-arrow {
    position: relative;
  }
  .next-arrow {
    position: relative;
  }

  .pre-arrow::after {
    position: absolute;
    top: 18px;
    left: 21px;
    content: "";
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-45deg);
    cursor: pointer;
  }

  .next-arrow::after {
    position: absolute;
    top: 18px;
    right: 21px;
    content: "";
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    cursor: pointer;
  }
}
</style>
